import { Checkbox } from 'antd';
import React from 'react';

interface SpecFormItemProps {
  value?: string;
  onChange?: (value: string) => void;
  options?: string;
}

// eslint-disable-next-line react/prefer-stateless-function
class SpecFormItem extends React.Component<SpecFormItemProps> {
  render() {
    const originOptions = this.props.options?.split(',')!;
    return (
      <Checkbox.Group
        defaultValue={this.props.value?.split(',')}
        onChange={checkedValue => {
          (checkedValue as string[]).sort(
            (a: string, b: string) => originOptions.indexOf(a) - originOptions.indexOf(b),
          );
          if (this.props.onChange) {
            this.props.onChange(checkedValue.join(','));
          }
        }}
      >
        {originOptions.map(item => (
          <Checkbox key={item} value={item}>
            {item}
          </Checkbox>
        ))}
      </Checkbox.Group>
    );
  }
}

export default SpecFormItem;
